iframe content has the navigation bar

[maffy]

I thought I could do this with just CSS, but it's not working.

I have an html file header that contains the website banner and navigation bar.
The nav bar is a <ul> list of links to the various pages, and CSS makes them look like buttons.

I include that file using an <iframe> element in my other pages.

when a user clicks a menu button (about us, home, etc.) the change in color isn't saved. The hover works - so it looks selected - and then the new page comes up and the selection disappears.

If I want to use a js script to force it to check highlighting, how do I get at the <li> elements? If I'm in index.html, for example, I have the <iframe> element, but I wouldn't think that the current document would conain the <li> elements of the navigation bar. If I'm in the header.html, then I don't know what page I'm on (i.e. what page is including the header) to know which menu item should be highlighted.

Any ideas on how I can do this?

Thanks!

[acoder]

The iframe document contains the li elements, so once you have that you can loop through to get them. As for saving the colour change, you can use a cookie or the URL to save the change. If you're using a server-side language, remove the iframe and include the navigation in each page.

[maffy]

Thanks for the quick reply!
I solved my problem by having one file with the header and footer, and loading the other pages into an iframe in the center of that file - depending upon which navigation button the user clicks.

now I have a new problem. I have a contact form, and want to do some validation. I added a:

onsubmit="return validateForm()"

to the form tag, and I am testing with bad data to see the errors (which are spans to the right of the fields. If there's an error, the innerHTML of the span is filled in, otherwise, nothing appears there.) so I know that the validateForm() is returning false.

Here's the problem -- the whole current page is trying to fit in the iframe in the center of the page. I'm not seeing the form at all, but I get two headers, two nav bars -- seriously ugly and not useful.

Is there anyway to force re-display of the form itself in the frame like it is before the user hits submit?

THANKS!

[acoder]

If you can, I would advise you to drop the idea of using iframes. That depends largely on if you're using a language server-side, e.g. PHP, JSP.

If you can't, you'll need to set the action of the form to the page contained within the iframe, not the main parent page (which contains the navigation as well as the iframe).